@import 'src/assets/scss/common';
.clip-editor-bg{
  position: relative;
  z-index: 2;
  img{
    -webkit-user-drag: none;
  }
  .handler-bar{
    position: absolute;
    left: 50%;
    top: -50px;
    width: 390px;
    transform: translate(-50%, 0);
    background-color: #fff;
    border-radius: 1px solid #ddd;
    padding: 0 10px;
    box-shadow: 0px 3px 5px 0px rgba(5, 19, 31, 0.1);
    z-index: 5;
    .bar-title{
      float: left;
      height: 36px;
      line-height: 36px;
      margin-right: 20px;
    }
    .el-slider{
      float: left;
      width: 180px;
      margin-right: 20px;
    }
    .handler-btns{
      float: left;
      height: 36px;
      line-height: 36px;
      padding-left: 10px;
      border-left: 1px solid #ddd;
      .handler-btn{
        margin: 0 6px;
        cursor: pointer;
        &.primary{
          color: $primary;
        }
      }
    }
  }
  .bg-preview-img{
    position: absolute;
    max-width: none;
    opacity: .3;
    cursor: move;
  }
  .bg-preview-wrap{
    width: 100%;
    height: 100%;
  }
  .bg-preview-img-light{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: move;
    overflow: hidden;
    img{
      position: absolute;
      max-width: none;
    }
  }
}
